<template>
  <div>
    <!-- 全局样式 avue-dialog 同时添加 v-dialogdrag 指令即可拖动 -->
    <el-dialog title="提示" v-dialogdrag :visible.sync="type0" width="40%">
      <span>这是一段信息</span>
      <span slot="footer">
        <el-button @click="type0 = false">取 消</el-button>
        <el-button @click="type0 = false" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提示"
      v-dialogdrag
      :visible.sync="type1"
      class="avue-dialog avue-dialog--top"
      width="40%"
    >
      <span>这是一段信息</span>
      <div class="avue-dialog__footer">
        <el-button @click="type1 = false">取 消</el-button>
        <el-button @click="type1 = false" type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <el-button @click="openBox(0)">原生el样式弹窗</el-button>
    <el-button type="primary" @click="openBox(1)">avue样式弹窗</el-button>

    <!-- 基础 -->
    <el-row style="margin-bottom: 20px">
      <el-radio-group v-model="sizeValue">
        <el-radio label="small">默认</el-radio>
        <el-radio label="medium">medium</el-radio>
        <el-radio label="small">small</el-radio>
        <el-radio label="mini">mini</el-radio>
      </el-radio-group>
    </el-row>
    <avue-form
      ref="form"
      v-model="obj"
      :option="option"
      @reset-change="emptytChange"
      @submit="submit"
    >
      <template slot="menuForm">
        <el-button @click="tip">自定义按钮</el-button>
      </template>
    </avue-form>
  </div>
</template>
<script>
var DIC = {
  VAILD: [
    {
      label: "真",
      value: "true",
    },
    {
      label: "假",
      value: "false",
    },
  ],
  SEX: [
    {
      label: "男",
      value: 0,
    },
    {
      label: "女",
      value: 1,
    },
  ],
};
export default {
  data() {
    return {
      type0: false,
      type1: false,
      obj: {},
      sizeValue: "small",
    };
  },
  computed: {
    option() {
      return {
        size: this.sizeValue,
        mockBtn: true,//打印按钮
        submitText: "完成",
        printBtn: true,//打印按钮
        column: [
          {
            label: "用户名",//标题
            prop: "username",
            tip: "这是信息提示",//文字提示
            span: 8,// 栅格布局24，默认12
            maxlength: 5,
            suffixIcon: "el-icon-tickets",
            prefixIcon: "el-icon-tickets",
            minlength: 2,
            mock: {
              type: "name",
              en: true,
            },
            rules: [  // 验证规则
              {
                required: true,
                message: "请输入用户名",
                trigger: "blur",
              },
            ],
            click: ({ value, column }) => {
              this.$message.success("click");
            },
          },
          {
            label: "姓名",
            prop: "name",
            disabled: true, // 禁用表单
            mock: {
              type: "name",
            },
            span: 8,
          },
          {
            label: "密码",
            prop: "password",
            type: "password",
            mock: {
              type: "name",
            },
            span: 8,
          },
          {
            label: "类型",
            prop: "type",
            type: "select",//选择框
            dicData: DIC.VAILD,//字典
            span: 6,
            mock: {
              type: "dic",
            },
          },
          {
            label: "权限",
            prop: "grade",
            span: 6,
            type: "checkbox",
            dicData: DIC.VAILD,
            mock: {
              type: "dic",
            },
          },
          {
            label: "开关",
            prop: "switch",
            span: 6,
            type: "switch",
            dicData: DIC.SEX,
            mock: {
              type: "dic",
            },
            hide: true,
            row: true,
          },
          {
            label: "性别",
            prop: "sex",
            span: 6,
            type: "radio",
            dicData: DIC.SEX,
            mock: {
              type: "dic",
            },
          },
          {
            label: "数字",
            prop: "number",
            type: "number",
            span: 6,
            precision: 2,//数值精度
            mock: {
              type: "number",
              max: 1,
              min: 2,
              precision: 2,
            },
            minRows: 0,//设置计数器允许的最小值
            maxRows: 3,
            row: true,//是否单独成行
          },
          {
            label: "网站",
            span: 12,
            prop: "url",
            prepend: "http://",//输入框前置内容
            mock: {
              type: "url",
              header: false,
            },
            append: "com",//输入框后置内容
            row: true,
          },
          {
            label: "日期",
            prop: "date",
            type: "date",
            span: 8,
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            mock: {
              type: "datetime",
              format: "yyyy-MM-dd",
            },
          },
          {
            label: "日期时间",
            prop: "datetime",
            type: "datetime",
            span: 8,
            format: "yyyy-MM-dd hh:mm:ss",
            valueFormat: "yyyy-MM-dd hh:mm:ss",
            mock: {
              type: "datetime",
              format: "yyyy-MM-dd hh:mm:ss",
              now: true,
            },
          },
          {
            label: "时间",
            prop: "time",
            type: "time",
            span: 8,
            format: "hh:mm:ss",
            valueFormat: "hh:mm:ss",
            mock: {
              type: "datetime",
              format: "hh:mm:ss",
            },
          },
          {
            label: "地址",
            span: 24,
            prop: "address",
            mock: {
              type: "county",
            },
          },
          {
            label: "建议",
            span: 24,
            prop: "adit",
            mock: {
              type: "word",
              min: 10,
              max: 30,
            },
          },
        ],
      };
    },
  },
  mounted() {
    this.obj = {
      username: "smallwei",
      switch: 0,
      phone: "17547400800",
    };
  },
  methods: {
    openBox(index) {
      this["type" + index] = true;
    },
    emptytChange() {
      this.$message.success("清空方法回调");
    },
    submit() {
      this.$message.success("当前数据" + JSON.stringify(this.obj));
    },
    tip() {
      this.$message.success("自定义按钮");
    },
  },
};
</script>